<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录成功</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #282c34;
            color: #ffffff;
            overflow: hidden;
        }

        .message {
            text-align: center;
        }

        canvas {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div class="message">
        <h1>登录成功！</h1>
        <p id="countdown">5 秒后将进入主页...</p>
    </div>
    <canvas id="fireworks"></canvas>
    <script>
        const countdownElement = document.getElementById('countdown');
        let timeLeft = 5;

        const countdownInterval = setInterval(() => {
            timeLeft--;
            countdownElement.textContent = `${timeLeft} 秒后将进入主页...`;

            if (timeLeft <= 0) {
                clearInterval(countdownInterval);
                startFireworks();
            }
        }, 1000);

        function startFireworks() {
            const canvas = document.getElementById('fireworks');
            const ctx = canvas.getContext('2d');
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;

            const fireworks = [];
            const colors = ['#ff3f3f', '#3fff3f', '#3f3fff', '#ffff3f', '#ff3fff'];

            function Firework(x, y) {
                this.x = x;
                this.y = y;
                this.radius = Math.random() * 2 + 1;
                this.color = colors[Math.floor(Math.random() * colors.length)];
                this.vx = Math.random() * 4 - 2;
                this.vy = Math.random() * 4 - 2;
                this.alpha = 1;

                this.update = function() {
                    this.x += this.vx;
                    this.y += this.vy;
                    this.alpha -= 0.02;
                };

                this.draw = function() {
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                    ctx.fillStyle = `rgba(${parseInt(this.color.slice(1, 3), 16)},${parseInt(this.color.slice(3, 5), 16)},${parseInt(this.color.slice(5, 7), 16)},${this.alpha})`;
                    ctx.fill();
                };
            }

            function animate() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);

                fireworks.forEach((firework, index) => {
                    firework.update();
                    firework.draw();

                    if (firework.alpha <= 0) {
                        fireworks.splice(index, 1);
                    }
                });

                requestAnimationFrame(animate);
            }

            setInterval(() => {
                for (let i = 0; i < 10; i++) {
                    fireworks.push(new Firework(Math.random() * canvas.width, Math.random() * canvas.height));
                }
            }, 500);

            animate();
        }
    </script>
</body>
</html>
